import React, { useState, useEffect } from 'react';
import { Menu, Divider, Tooltip, theme } from 'antd';
import {
    HomeOutlined,
    UserOutlined,
    ShoppingOutlined,
    ContactsOutlined,
    SettingOutlined,
    LogoutOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import styles from './Sidebar.module.css';

const { useToken } = theme;

const Sidebar = ({ collapsed, onToggle }) => {
    const { token } = useToken();
    const navigate = useNavigate();
    const location = useLocation();
    const [selectedKey, setSelectedKey] = useState(location.pathname);

    // 监听路由变化
    useEffect(() => {
        setSelectedKey(location.pathname);
    }, [location.pathname]);

    // 主菜单项
    const mainMenuItems = [
        {
            key: '/',
            icon: <HomeOutlined />,
            label: '智能助手',
        }
    ];

    // 底部菜单项
    const bottomMenuItems = [
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: '设置',
        },
        {
            key: 'logout',
            icon: <LogoutOutlined />,
            label: '退出登录',
            danger: true,
        },
    ];

    const handleMenuClick = ({ key }) => {
        if (key === 'logout') {
            // 处理退出登录逻辑
            console.log('退出登录');
            return;
        }

        if (key === 'settings') {
            // 处理设置逻辑
            console.log('打开设置');
            return;
        }

        setSelectedKey(key);
        navigate(key);
    };

    return (
        <div
            className={`${styles.sidebar} ${collapsed ? styles.collapsed : ''}`}
            style={{
                backgroundColor: token.colorBgContainer,
                borderRight: `1px solid ${token.colorBorderSecondary}`,
                width: collapsed ? 80 : 200
            }}
        >
            {/* 顶部折叠按钮和Logo区域 */}
            <div className={styles.sidebarHeader}>
                {!collapsed && (
                    <div className={styles.logo}>
                        <h2>我的应用</h2>
                    </div>
                )}
                <Tooltip
                    title={collapsed ? "展开菜单" : "折叠菜单"}
                    placement="right"
                >
                    <div className={styles.collapseButton} onClick={onToggle}>
                        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    </div>
                </Tooltip>
            </div>

            <Divider style={{ margin: '12px 0' }} />

            {/* 主菜单 */}
            <Menu
                mode="inline"
                selectedKeys={[selectedKey]}
                items={mainMenuItems}
                onClick={handleMenuClick}
                inlineCollapsed={collapsed}
                className={styles.menu}
            />

            {/* 底部菜单 */}
            <div className={styles.bottomMenu}>
                <Divider style={{ margin: '12px 0' }} />
                <Menu
                    mode="inline"
                    items={bottomMenuItems}
                    onClick={handleMenuClick}
                    inlineCollapsed={collapsed}
                    className={styles.menu}
                />
            </div>
        </div>
    );
};

export default Sidebar;